<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="http://192.168.17.3:5050/socket.io/socket.io.js"></script>
		<style>
		.chat{ display: none;}
		.self{
			text-align: right;
		}
		</style>
	</head>
	<body>
		<div class="page">
			<h1>登录</h1>
			<input type="text" class="uname"/>
			<button onclick="toChat()">开始聊天</button>
		</div>
		<div class="chat">
			<div class="header">中国云端交流  <span class="user"></span> <span onclick="location.reload()">退出</span></div>
			<p class="info"> 当前有<span class="count"></span>在聊天室，<span class="list"></span></p>
			<div class="chatbox"></div>
			<textarea rows="" cols="" class="msg"  ></textarea>
			<button onclick="send()">发送</button>
		</div>
		<script>
		this.user = {userid:"",username:'',message:''};
		// 初始 socket
		this.socket = io.connect("ws://192.168.17.3:5050");
		// 监听用户发送的信息
		// this.socket.on("message",obj=>{
		// 	console.log(obj);
		// }) 
		function toChat(){
			// 获取用户名
			this.user.username = document.querySelector(".uname").value;
			// 获取用户id
			this.user.userid = this.user.username+new Date().getTime();
			// 隐藏登录
			document.querySelector(".page").style.display = "none";
			// 显示聊天页面
			document.querySelector(".chat").style.display = "block";
			// 发送登录事件
			this.socket.emit("login",this.user);
		}
		// 登录
		this.socket.on("login",obj=>{
			// 设置用户的名称（退出旁边）
			inout(obj,1);
			// 不是自己就提升xxx进入聊天室
			
		})
		function inout(obj,type){
			document.querySelector(".user").innerText = this.user.username;
			// 设置用户总数
			document.querySelector(".count").innerText = obj.onlineCount;
			// 获取obj.onlineUser 对象的所有值  Object.keys 所有键  结果都是数组
			var list = Object.values(obj.onlineUsers);
			// 放入.list里面用逗号链接
			document.querySelector(".list").innerText=list.join(',');
			// 创建一个div
			var div = document.createElement("div");
			var str = '';
			if(type===1){
				str = "进入"
			}else{
				str = '离开';
			}
			div.innerHTML = obj.user.username+str+"聊天室";
			if(this.user.userid!=obj.user.userid){
				document.querySelector(".chatbox").appendChild(div);
			}
		}
		// 退出
		this.socket.on("logout",obj=>{
			inout(obj,2)
		})
		
		// 聊天
		function send(){
			// 获取msg节点
			var msg = document.querySelector(".msg");
			// 设置用户信息
			this.user.message = msg.value;
			// 发送信息
			this.socket.emit("message",this.user);
			msg.value = '';
		}
		this.socket.on("message",obj=>{
			console.log(obj);
			// 创建div
			var div = document.createElement("div");
			// 设置类名
			div.className="item";
			// 设置文本
			div.innerText = obj.username+":"+obj.message;
			// 插入节点
			document.querySelector(".chatbox").appendChild(div);
			// 如果是自己添加self的类名
			if(obj.userid == this.user.userid){
				div.classList.add("self");
			}
		})
		var msg =  document.querySelector(".msg");
		// 给msg 添加一个键盘事件，如果回车就发送
		msg.onkeyup = function(e){
			// console.log(e);
			if(e.code==="Enter"){
				send();
			}
		}
		
		 
		
		</script>
	</body>
</html>
